/* eslint-disable react/jsx-no-bind */
import { Card } from 'antd'
import { render } from 'react-dom'

const $root = document.querySelector('#app')

const App = () => {
  const report = () => {
    window.Slardar('report')
    fetch('http://cypress.test/report', {
      method: 'POST',
    })
  }

  const init = () => {
    window.Slardar('init', Cypress.env().init)
  }

  const config = () => {
    window.Slardar('config', {
      slardar_web_id: 'cypress',
    })
  }

  return (
    <div className="app">
      <div id="report" onClick={() => report()}>
        report
      </div>
      <div id="init" onClick={() => init()}>
        init
      </div>
      <div id="config" onClick={() => config()}>
        config
      </div>
      <Card>
        <h1>Slardar SDK</h1>
        <p>Testing by cypress</p>
      </Card>
    </div>
  )
}

render(<App />, $root!)
